<template>
    <div class="container">
        <div class="step-block" v-if="active !== 3"><zw-steps :active="active" :steps="steps" /></div>
        <Form v-show="active === 0" @submit="formSubmitHandler"></Form>
        <Upload :data="form" v-if="active === 1" @submit="uploadSubmitHandler" @back="backHandler"></Upload>
        <div class="successWrapper" v-if="active === 2">
            <img src="@/assets/imgs/sys/verify-success.png" alt="" />
            <p>提交成功</p>
            <span class="tip"
                >提交审核后，我们将于5个工作日内完成信息审核，审核期间，您可以正常装修商城，配置相关内容，避免耽误您的项目进展</span
            >
            <div class="list">
                <span>企业信息：{{ form.merchantName || '' }}</span>
                <span>联系人：{{ form.contactName || '' }}</span>
                <span>提交时间：{{ dateStr || format(new Date(), 'YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
        </div>
        <div class="failWraapper" v-if="active === 3">
            <img src="@/assets/imgs/sys/verify-fail.png" alt="" />
            <p>认证失败</p>
            <div class="fail">请核对并修改以下信息后，再重新提交</div>
            <div class="content">
                <div class="title">您提交的内容有以下错误：</div>
                <div v-for="e in failReason" :key="e" class="msg">
                    <img class="img" src="@/assets/imgs/sys/verify-fail.png" alt="" />
                    <div class="word">{{ e }}</div>
                </div>
            </div>

            <el-button class="btn" type="primary" @click="backHandler">重新提交</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import storage from '@/commons/storage';
import store from '@/store';
import { useRoute } from 'vue-router';
import request from '@/request';
import ZwSteps from '@/components/Steps.vue';
import Form from './form.vue';
import Upload from './upload.vue';
import { format } from '@/commons/utils';

const useIdent = store.useIdentStore();

const active = ref(4);
const dateStr = ref('');
const failReason = ref('');
const form = reactive({});
const steps = reactive([
    {
        title: '填写基本信息'
    },
    {
        title: '上传附件'
    },
    {
        title: '完成'
    }
]);
// 第一步资料
const formSubmitHandler = val => {
    Object.assign(form, val);
    active.value = 1;
};
// 提交
const uploadSubmitHandler = () => {
    active.value = 2;
};
// 返回
const backHandler = () => {
    active.value = 0;
};
onMounted(async () => {
    if (useRoute().query.status === '0') {
        active.value = 0;
    } else if (useRoute().query.status === '3') {
        active.value = 3;
        const { data } = await request('regInfo', {
            tenantId: storage.get('ZW-TENANT-ID')
        });
        failReason.value = data.rejectReason.split('\n');
        useIdent.setIdentRegInfo(data);
    }
});
</script>
<style lang="scss" scoped>
.step-block {
    width: 794px;
    text-align: center;
    margin: 20px auto 50px;
}
.successWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
        margin: 45px 0 0;
        width: 48px;
        height: 48px;
    }
    p {
        margin: 24px 0 8px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 32px;
    }
    .tip {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
    }
    .list {
        font-size: 14px;
        font-weight: 400;
        color: #33302d;
        line-height: 20px;
        display: flex;
        justify-content: center;
        margin-top: 72px;
        span {
            margin: 0 30px;
        }
    }
}
.failWraapper {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    align-items: center;
    justify-content: center;
    img {
        width: 48px;
        height: 48px;
        margin-bottom: 24px;
    }
    p {
        margin: 0 auto 12px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 32px;
    }
    .fail {
        font-size: 14px;
        margin-bottom: 24px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
        white-space: pre-wrap;
    }
    .content {
        // display: flex;
        margin: 15px 0 45px;
        width: 75%;
        .title {
            font-weight: 600;
            margin-bottom: 12px;
        }
        .msg {
            white-space: pre-wrap;
            margin-left: 5px;
            word-break: break-all;
            display: flex;
        }
        .img {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin: 0;
            vertical-align: bottom;
        }
        .word {
            display: inline-block;
            margin-left: 5px;
        }
    }
}
</style>
